<script setup>

import {inject, onMounted, provide, reactive, ref, toRefs} from "vue";
import {ElMessage} from "element-plus";
import {useItem} from "../../../../store/index.js";
import {getPVCListHandler as  getList} from "../../../../api/pvc.js";

const useItemer =useItem()

const props = defineProps({
  volumeConfig: {
    type: Object,
    default: {}
  },
  method: {
    type: String,
    default: "Create"
  },
  // clusterId: {
  //   type: String,
  //   required: true
  // },
  // namespace: {
  //   type: String,
  //   required: true
  // },
})

onMounted(()=>{
  if(props.method !== "Create"){
    data.newVolumeConfig = props.volumeConfig
  }
})

const data=reactive({
  newVolumeConfig:{
    name: '',
    persistentVolumeClaim: {
      claimName: '',
      readOnly: false
    },
  },
  rules: {
    name: [
      {required: true,message: '请输入Volume名称',trigger: 'blur'},
    ],
    'persistentVolumeClaim.claimName': [
      {required: true,message: '请选择pvc',trigger: 'blur'},
    ]
  },
  items: []
})
let formRef =ref()
// 添加按钮触发的动作
const submit= ()=>{
  // 1. 提交前校验数据
  formRef.value.validate((valid) => {
    if (valid){
      console.log('data.newVolumeConfig',data.newVolumeConfig)
      if (useItemer.item.spec.template.spec.volumes === undefined){
        useItemer.item.spec.template.spec.volumes = []
      }
      // voluem的名称不可以重复，遍历当前环境中volume的name字段是否重复
      for (let i=0;i<useItemer.item.spec.template.spec.volumes.length;i++){
        if(useItemer.item.spec.template.spec.volumes[i].name === data.newVolumeConfig.name){
          // 说明已经存在已经相同名字的volues
          ElMessage.error("volume名称不能重复")
          return
        }
      }

      const newVlume = JSON.parse(JSON.stringify(data.newVolumeConfig))
      // data.newVolumeConfig 是引用类型，每次添加都会覆盖这个值
      useItemer.item.spec.template.spec.volumes.push(newVlume)
      console.log('data.newVolumeConfig',useItemer.item)
      // 关闭dialog
      closeDialog()
    }else {
      ElMessage.warning('请完善表单')
    }
  })
}

// 选择框展开调用接口查询数据
const visibleChanged=(visible)=>{
    if (visible){
        // 调用查询类别函数
      const getData = {
        clusterId: useItemer.clusterId,
        namespace: useItemer.namespace,
      }
      getList(getData).then((response)=>{
        data.items =  response.data.data.items
        console.log("data.items",data.items)
      })
    }
}

// 订阅关闭dialog的方法
const closeDialog = inject('closeAddVolumeDialog')

const {newVolumeConfig,items,rules}=toRefs(data)
</script>

<template>
  <el-form :model="newVolumeConfig" ref="formRef" :rules="rules">
    <!--   名称     -->
    <el-row :gutter="20">
      <!-- 存储名称 -->
      <el-col :span="8"  v-if="props.method ==='Create'">
        <el-form-item label="Volume名称" prop="name" required>
          <el-input  v-model.trim="newVolumeConfig.name" style="width: 180px" placeholder="请输Volume名称"/>
        </el-form-item>
      </el-col>
      <!--    ClaimName      -->
      <el-col :span="8">
        <el-form-item label="pvc" prop="persistentVolumeClaim.claimName" required>
<!--          <el-input  v-model.trim="newVolumeConfig.persistentVolumeClaim.claimName" style="width: 180px" placeholder="请输宿主机路径"/>-->
          <el-select v-model="newVolumeConfig.persistentVolumeClaim.claimName" placeholder="请选择pvc" style="width: 240px" @visible-change="visibleChanged">
            <el-option
                v-for="item in items"
                :key="item.metadata.name"
                :label="item.metadata.name"
                :value="item.metadata.name"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <!-- NFS只读按钮 -->
      <el-col :span="8">
        <el-form-item label="只读" prop="nfs.readOnly" required>
          <!--          <el-input  v-model.trim="newVolumeConfig.nfs.readOnly" style="width: 180px" placeholder="请输宿主机路径"/>-->
          <el-switch v-model="newVolumeConfig.persistentVolumeClaim.readOnly" />
        </el-form-item>
      </el-col>
    </el-row>
    <!--  提交按钮  -->
    <div class="button-container"  v-if="props.method ==='Create'">
      <el-button  @click="submit()" type="primary">添加</el-button>
    </div>
  </el-form>
</template>

<style scoped>
/* el-button 剧中存放 */
.button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
}
</style>